<template>
  <Dialog
    v-model="dialogVisible"
    width="800px"
    :title="
      dialogType === 'add' ? t('system.parameterConfig.add') : t('system.parameterConfig.edit')
    "
    :before-close="() => closeDialog(formRef)"
  >
    <el-form :model="form" ref="formRef" :rules="rules as FormRules" label-width="90px">
      <el-form-item :label="t('system.parameterConfig.parameterName')" prop="name">
        <el-input v-model="form.name" :placeholder="t('system.parameterConfig.nameMsg')" />
      </el-form-item>
      <el-form-item :label="t('system.parameterConfig.key')" prop="key">
        <el-input v-model="form.key" :placeholder="t('system.parameterConfig.keyMsg')" />
      </el-form-item>
      <el-form-item :label="t('system.parameterConfig.value')" prop="value">
        <el-input v-model="form.value" :placeholder="t('system.parameterConfig.valueMsg')" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button class="m-r-4" @click="closeDialog(formRef)">{{
        t('system.parameterConfig.cancel')
      }}</el-button>
      <el-button type="primary" @click="submit(formRef)">{{
        t('system.parameterConfig.save')
      }}</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { Dialog } from '@/components/Dialog'
import { useI18n } from '@/hooks/web/useI18n'
import { type FormInstance, type FormRules, ElMessage } from 'element-plus'
import { createParameterConfigApi, editParameterConfigApi } from '@/api/system'

const emit = defineEmits(['refresh'])
const { t } = useI18n()

let dialogVisible = ref<boolean>(false)
let dialogType = ref<string>()

const formRef = ref<FormInstance>()
const form = ref<Record<string, any>>({
  name: '',
  key: '',
  value: ''
})
const rules = ref<FormRules>({
  name: [
    {
      required: true,
      message: t('system.parameterConfig.nameMsg'),
      trigger: 'change'
    }
  ],
  key: [
    {
      required: true,
      trigger: ['change', 'blur'],
      validator: (rule: Record<string, any>, value: string, callback: Function) => {
        if (!value) {
          callback(new Error(t('system.parameterConfig.keyMsg')))
        } else {
          if (!/[\u4e00-\u9fa5]/.test(value)) {
            callback()
          } else {
            callback(new Error(t('system.parameterConfig.chineseValidationMsg')))
          }
        }
      }
    }
  ],
  value: [
    {
      required: true,
      trigger: ['change', 'blur'],
      validator: (rule: Record<string, any>, value: string, callback: Function) => {
        if (!value) {
          callback(new Error(t('system.parameterConfig.valueMsg')))
        } else {
          if (!/[\u4e00-\u9fa5]/.test(value)) {
            callback()
          } else {
            callback(new Error(t('system.parameterConfig.chineseValidationMsg')))
          }
        }
      }
    }
  ]
})

const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
      const resp =
        dialogType.value === 'add'
          ? await createParameterConfigApi(form.value)
          : await editParameterConfigApi(form.value.id, {
              name: form.value.name,
              key: form.value.key,
              value: form.value.value
            })
      if (resp.code === 0) {
        ElMessage.success(
          dialogType.value === 'add'
            ? t('system.parameterConfig.createSucMsg')
            : t('system.parameterConfig.editSucMsg')
        )
        closeDialog(formEl)
        emit('refresh')
      }
    }
  })
}

const closeDialog = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  form.value = {
    name: '',
    key: '',
    value: ''
  }
  formEl.resetFields()
  dialogVisible.value = false
}
const getBackShow = (type: string, row?: Record<string, any>) => {
  dialogType.value = type
  if (type === 'edit' && Reflect.ownKeys(row!).length) form.value = row!
}

defineExpose({
  dialogVisible,
  getBackShow
})
</script>
<style lang="less" scoped></style>
